<template>
  <div class="user_right fl ml20">
    <!-- <el-form :model="newGoods" :rules="rules" ref="newGoods"> -->
    <el-row :gutter="20" class="mt34">
      <el-col :span="7">
        <div class="grid-left bg-purple t_right">
          <span>*</span>选择商铺:
        </div>
      </el-col>
      <el-col :span="17">
        <div class="grid-right bg-purple">
          <el-select v-model="store_id" placeholder="请选择" @change="choiceStore">
            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mt34">
      <el-col :span="7">
        <div class="grid-left bg-purple t_right">
          <span>*</span>标题:
        </div>
      </el-col>
      <el-col :span="17">
        <div class="grid-right bg-purple">
          <!-- <el-form-item prop="title"> -->
          <el-input class="inp227" v-model="newGoods.title" placeholder="请输入型号"></el-input>
          <!-- </el-form-item> -->
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mt34">
      <el-col :span="7">
        <div class="grid-left bg-purple t_right">
          <span>*</span>品牌:
        </div>
      </el-col>
      <el-col :span="17">
        <div class="grid-right bg-purple">
          <!-- <el-form-item prop="brand_id"> -->
          <el-select v-model="newGoods.brand_id" placeholder="请选择店铺">
            <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <!-- </el-form-item> -->
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mt34">
      <el-col :span="7">
        <div class="grid-left bg-purple t_right">
          <span>*</span>系列:
        </div>
      </el-col>
      <el-col :span="17">
        <div class="grid-right bg-purple">
          <!-- <el-form-item prop="series_name"> -->
          <el-input class="inp227" v-model="newGoods.series_name" placeholder="请输入型号"></el-input>
          <!-- </el-form-item> -->
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mt34">
      <el-col :span="7">
        <div class="grid-left bg-purple t_right">
          <span>*</span>型号:
        </div>
      </el-col>
      <el-col :span="17">
        <div class="grid-right bg-purple">
          <!-- <el-form-item prop="model_name"> -->
          <el-input class="inp227" v-model="newGoods.model_name" placeholder="请输入型号"></el-input>
          <!-- </el-form-item> -->
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mt34">
      <el-col :span="7">
        <div class="grid-left bg-purple t_right">
          <span>*</span>订货号:
        </div>
      </el-col>
      <el-col :span="17">
        <div class="grid-right bg-purple">
          <!-- <el-form-item prop="part_number"> -->
          <el-input class="inp227" v-model="newGoods.part_number" placeholder="请输入订货号"></el-input>
          <!-- </el-form-item> -->
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mt34">
      <el-col :span="7">
        <div class="grid-left bg-purple t_right">
          <span>*</span>数量:
        </div>
      </el-col>
      <el-col :span="17">
        <div class="grid-right bg-purple">
          <!-- <el-form-item prop="stock"> -->
          <el-input class="inp227" v-model="newGoods.stock" placeholder="请输入数量"></el-input>
          <!-- </el-form-item> -->
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mt34">
      <el-col :span="7">
        <div class="grid-left bg-purple t_right">
          <span>*</span>单价:
        </div>
      </el-col>
      <el-col :span="17">
        <div class="grid-right bg-purple">
          <!-- <el-form-item prop="discount_price"> -->
          <el-input class="inp227" v-model="newGoods.discount_price" placeholder="请输入价格(元)"></el-input>
          <!-- </el-form-item> -->
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mt34">
      <el-col :span="7">
        <div class="grid-left bg-purple t_right">市场价:</div>
      </el-col>
      <el-col :span="17">
        <div class="grid-right bg-purple">
          <el-input class="inp227" v-model="newGoods.price" placeholder="请输入市场价格(元)"></el-input>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mt36">
      <el-col :span="7">
        <div class="grid-left bg-purple t_right">
          <span>*</span>货物所在地:
        </div>
      </el-col>
      <el-col :span="17">
        <div class="grid-right bg-purple">
          <!-- <el-form-item prop="province"> -->
          <el-select v-model="newGoods.province" @change="select_province" placeholder="请选择">
            <el-option
              v-for="item in provinceList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          <!-- </el-form-item> -->
          <!-- <el-form-item prop="city"> -->
          <el-select v-model="newGoods.city" @change="select_city" placeholder="请选择" style="margin-left:19px">
            <el-option
              v-for="item in regionList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
          <!-- </el-form-item> -->
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mt34">
      <el-col :span="7">
        <div class="grid-left bg-purple t_right">
          <span>*</span>商品图片:
        </div>
      </el-col>
      <el-col :span="17">
        <div class="grid-right bg-purple">
          <el-upload
            action
            :multiple="false"
            :limit="5"
            list-type="picture-card"
            :on-change="getFilea"
            :on-remove="handleRemoveb"
            :auto-upload="false"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mt34">
      <el-col :span="7">
        <div class="grid-left bg-purple t_right">备注:</div>
      </el-col>
      <el-col :span="17">
        <div class="grid-right bg-purple">
          <el-input
            style="width:600px"
            type="textarea"
            :rows="9"
            placeholder=""
            v-model="newGoods.remarks"
          ></el-input>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mt34">
      <el-col :span="7">
        <div class="grid-left bg-purple t_right"></div>
      </el-col>
      <el-col :span="17">
        <div class="grid-right bg-purple">
          <button class="btn btn_shelves" @click="shelves">上架商品</button>
          <button class="btn btn_reset" @click="bandReset">重置</button>
        </div>
      </el-col>
    </el-row>
    <!-- </el-form> -->
  </div>
</template>

<script>
import { brands } from "@/api/category";
import { getProvinceList } from "@/api/user";
import { newGoodsBtn , bindBrands , ovistoreList} from "@/api/business";
export default {
  data() {
    return {
      radio: 1,
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      newGoods: {
        province: "",
        city: "",
        brand_id: "",
        series_name: "",
        model_name: "",
        stock: "",
        part_number: "",
        discount_price: "",
        price: "",
        title: "",
        images_base64: [],
        image_base64: "",
        remarks: "",
        warehouse_area:""
      },
      store_id:'',
      storeList:[],
      imgList: [],
      remarks: "",
      brandList: [],
      provinceList: [],
      regionList: []
      // rules: {
      //   brand_id: [{ required: true, message: "请选择品牌", trigger: "blur" }],
      //   series_name: [
      //     { required: true, message: "请填写系列", trigger: "blur" }
      //   ],
      //   model_name: [
      //     { required: true, message: "请填写型号", trigger: "blur" }
      //   ],
      //   part_number: [
      //     { required: true, message: "请填写订货号", trigger: "blur" }
      //   ],
      //   stock: [{ required: true, message: "请填写数量", trigger: "blur" }],
      //   discount_price: [
      //     { required: true, message: "请填写单价", trigger: "blur" }
      //   ],
      //   title: [{ required: true, message: "请填写标题", trigger: "blur" }]
      // }
    };
  },
  created() {
    this.getprovince();
    this.getstoreList();
  },
  methods: {
    getFilea(file, fileList) {
      this.getBase64(file.raw).then(res => {
        this.newGoods.images_base64.push(res);
        this.newGoods.image_base64 = this.newGoods.images_base64[0];
      });
      console.log(this.newGoods.images_base64);
    },
    getBase64(file) {
      return new Promise(function(resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function() {
          imgResult = reader.result;
        };
        reader.onerror = function(error) {
          reject(error);
        };
        reader.onloadend = function() {
          resolve(imgResult);
        };
      });
    },
    handleRemoveb(a, b) {
      let img64 = "";
      this.getBase64(a.raw).then(res => {
        for (let i in this.newGoods.images_base64) {
          if (this.newGoods.images_base64[i] === res) {
            this.newGoods.images_base64.splice(i, 1);
            return;
          }
        }
      });
    },
    // 店铺选择
    async choiceStore(){
      await this.getBarands();
    },

    // 获取品牌列表
    async getBarands() {
      const res = await bindBrands(this.store_id);
      console.log(res)
      this.brandList = res;
    },

    // 获取地址
    async getprovince() {
      const res = await getProvinceList();
      this.provinceList = res;
    },

    // 选择省份
    select_province(e) {
      for (let key in this.provinceList) {
        if (this.provinceList[key].id === e) {
          this.regionList = this.provinceList[key].children;
          this.city = this.provinceList[key].children[0].name;
        }
      }
    },

    // 选择城市
    select_city(e){
      this.newGoods.warehouse_area = e;
      console.log(this.newGoods.warehouse_area)
    },

    // 上架
    async shelves() {
      const data = this.newGoods;
      await newGoodsBtn(data,this.store_id).then(e => {
        this.$message({message:'商品上架成功',type:'success'})
      });
    },

    // 获取店铺列表
    async getstoreList(){
     this.storeList = await ovistoreList();
    },

    // 重置
    bandReset(){
      for(let i in this.newGoods){
        this.newGoods[i] = ''
      }
    }
  }
};
</script>

<style lang="scss" scope>
// .bg-purple {
//   background: #d3dce6;
// }
.user_right {
  padding-bottom: 50px;
  padding-top: 30px;
}
.grid-left {
  font-size: 18px;
  color: #666;
  font-weight: 600;
  display: flex;
  align-items: center;
  padding-right: 48px;
  min-height: 30px;
}
.grid-right {
  display: flex;
  min-height: 30px;
  align-items: center;
}
.t_right {
  justify-content: flex-end;
}
.s14 {
  font-size: 18px;
  color: #666;
  font-weight: 600;
}
.mt34 {
  margin-top: 30px;
}
.inp227 {
  width: 227px;
}
.el-textarea__inner {
  border-radius: 10px;
}
.btn {
  width: 200px;
  height: 60px;
  border-radius: 5px;
  color: #ffffff;
  font-size: 20px;
  border: 0;
}
.btn_shelves {
  background: #0a6cad;
  margin-left: 38px;
}
.btn_reset {
  background: #e5e5e5;
  color: #666666 !important;
  margin-left: 28px;
}
.mt36 {
  margin-top: 30px;
}
</style>